<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页面</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/underscore.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/api.js"></script>    
    <script src="../js/loading.js"></script>
    <script src="../js/underscore.js"></script>
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="head">
            <div class="head_top width clearfix">
                <img src="../images/logo.png">
                <div class="search_nav right">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
            <div class="head_dw width clearfix">
                <ul class="nologin">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../view/login.html">登录</a></li>
                    <li><a href="../view/register.html">注册</a></li>
                </ul>
                <ul class="login">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../view/shopCar.html">购物车</a></li>
                    <li><a href="./login.html" id="quit">退出登录</a></li>
                </ul>
                <div class="search_nav right mar">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="detail width clearfix">
            <!-- 返回 -->
            <div class="back">
                👈返回
            </div>
            <!-- 商品图片 -->
            <div class="goodImg left relative"></div>
            <div class="big"></div>
            <!-- 商品描述 -->
            <div class="goodDescripe left"></div>
            <!-- 商品切换 -->
            <div class="tabImg absolute clearfix"></div>
        </div>
        <!-- 相关推荐 -->
        <div class="recommended width">
            <h3>相关推荐</h3>
        </div>
    </div>
</body>
<script>
    var loader = createLoading({
        src: '../images/loading.jpg',
    }).show();
    var detail = document.querySelector(".detail");
    var goodImg = document.querySelector(".goodImg");
    var goodDescripe = document.querySelector(".goodDescripe");
    var big = document.querySelector(".big");
    var tabImg = document.querySelector(".tabImg");
    // 初始化获取商品详情
    getDetail();
    // 获取商品详情
    function getDetail(params) {
        var url = location.href;
        var res = getUrlParams(url);  // 获取请求阐述
        console.log(res);
        REQUEST.get('/detail', {
            params: res
        }, function (data) {
            console.log('商品详情接口', data);
            var arr = JSON.parse(data[0].imgs);
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += `
                        <img src="${arr[i]}">
                    `
            }
            // 根据数据渲染dom 
            goodImg.innerHTML += `
                <img src="${data[0].img_list_url}">
                <div class="mask"></div>           
            `
            big.innerHTML += `
                <img src="${data[0].img_list_url}">
            `
            goodDescripe.innerHTML += `
                <h3>商品名称： ${data[0].title}</h3>
                <p>商品价格： <span>￥${data[0].price}</span></p>
                <p class="stars">⭐⭐⭐⭐⭐<span>5.0</span></p>
                <button class="shopCar">添加到购物车</button>
            `
            tabImg.innerHTML += `${str}`

            //tab切换
            var imgBtns = document.querySelectorAll(".tabImg>img");
            var imgBox = document.querySelectorAll(".goodImg>img")[0];
            var rigthImg = document.querySelector(".big>img");
            imgBtns[0].classList.add('borc');
            imgBtns.forEach(function (item) {
                item.onclick = function () {
                    imgBtns.forEach(function (item) {
                        item.classList.remove('borc')
                    });
                    item.classList.add('borc');
                    imgBox.src = item.src;
                    rigthImg.src = item.src;
                }
            })

            //放大镜
            var mask = document.querySelector(".mask");
            var bigImg = document.querySelector(".big>img");
            goodImg.onmouseenter = function (e) {
                big.style.display = "block";
            }
            goodImg.onmouseleave = function (e) {
                big.style.display = "none";
            }
            goodImg.onmousemove = function (e) {
                var left = e.offsetX - mask.clientWidth / 2;
                var top = e.offsetY - mask.clientHeight / 2;
                left = left <= 0 ? 0 : left;
                top = top <= 0 ? 0 : top;
                // mask向右移动最大是 small的宽度 - mask的宽度
                var bigleftDis = goodImg.clientWidth - mask.clientWidth;
                left = left >= bigleftDis ? bigleftDis : left;
                var bigtopDis = goodImg.clientHeight - mask.clientHeight;
                top = top > bigtopDis ? bigtopDis : top;

                mask.style.left = left + "px";
                mask.style.top = top + "px";

                // 2 让右边的大图根据遮罩的移动距离进行移动
                // 思考下 右边的图片的移动距离和mask移动的距离的比例如何计算

                // 大图移动的最大距离
                var imgleftDis = bigImg.clientWidth - big.clientWidth;
                var imgtopDis = bigImg.clientHeight - big.clientHeight;
                // 图片的移动距离 = mask的移动距离乘两者的比例
                bigImg.style.left = -left * imgleftDis / bigleftDis + "px";
                bigImg.style.top = -top * imgtopDis / bigtopDis + "px";
            }

            setTimeout(() => {
                loader.hide();
            }, 500);

            //添加购物车            
            var btn = document.querySelector(".goodDescripe>button");
            var flag = true
            btn.onclick = function (params) {
                localStorage.setItem("goodid",res.goodId);
                // 发送添加购物车请求
                // goodId username token
                if (flag) {
                    flag = false;
                    var token = localStorage.getItem('token');
                    var username = localStorage.getItem('username');
                    api.addShopcar({
                        username,
                        token,
                        goodId: res.goodId
                    }, function (data) {
                        flag = true;
                        if (data.code == 0) {
                            localStorage.removeItem('token');
                            alert("请先登录");
                            // 跳转到 登录页面
                            location.href = './login.html'
                        } else if (data.code == 2) {
                            alert('添加购物车失败');
                        } else if (data.code === 1) {
                            alert("添加购车成功");
                            location.href = `./shopCar.html`
                        }
                    })
                }
            }

        })
    }

    //返回上一页面
    var back = document.querySelector(".back");
    back.addEventListener("click", function () {
        history.back();
    })
    //验证登录
    checkLogin();

</script>

</html>